<template>
	<view class="container">
		<!-- 导航栏 -->
		<!-- <uni-nav-bar title="意见反馈" backgroundColor="#f5f5f5" color="#333"></uni-nav-bar> -->

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 文本输入 -->
			<textarea 
				v-model="content" 
				placeholder="请输入您的意见或建议..." 
				class="feedback-textarea"
			/>

			<!-- 图片上传 -->
			<view class="upload-section">
				<view 
					v-for="(img, index) in images" 
					:key="index" 
					class="image-preview"
				>
					<image :src="img" mode="aspectFill" @click="previewImage(index)" />
					<text class="delete-icon" @click="removeImage(index)">×</text>
				</view>

				<view 
					v-if="images.length < maxImages" 
					class="upload-btn" 
					@click="chooseImage"
				>
					+
				</view>
			</view>

			<!-- 提交按钮 -->
			<button type="primary" class="submit-btn" @click="submitFeedback">提交反馈</button>
		</view>
	</view>
</template>

<script>
	import {addFeedback} from "@/api/index.js";
export default {
	data() {
		return {
			content: '', // 反馈内容
			images: [], // 图片路径数组
			maxImages: 3, // 最多上传图片数量
		};
	},
	methods: {
		// 选择图片
		chooseImage() {
			const that = this;
			uni.chooseImage({
				count: this.maxImages - this.images.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success(res) {
					that.uploadImage(res.tempFilePaths[0])
					// that.images = that.images.concat(res.tempFilePaths);
				}
			});
		},
		
		uploadImage(tempFilePaths) {
			console.log("tempFilePaths", tempFilePaths)
			const that = this;
			uni.uploadFile({
				url: 'http://10.2.1.33:8080/common/upload/upload', //仅为示例，非真实的接口地址
				filePath: tempFilePaths,
				name: 'file',
				formData: {
					'user': 'test',
				},
				success: (uploadFileRes) => {
					console.log(uploadFileRes.data);
					that.images = that.images.concat('http://10.2.1.33:8080'+JSON.parse(uploadFileRes.data)?.entity)
				}
			});
		},

		// 预览图片
		previewImage(index) {
			uni.previewImage({
				current: index,
				urls: this.images
			});
		},

		// 删除图片
		removeImage(index) {
			this.images.splice(index, 1);
		},

		// 提交反馈
		submitFeedback() {
			if (!this.content.trim()) {
				uni.showToast({ title: '请输入反馈内容', icon: 'none' });
				return;
			}

			uni.showLoading({ title: '提交中...' });
			addFeedback({
				content: this.content,
				imageUrl: JSON.stringify(this.images)
			}).then(res => {
				console.log("res", res)
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({ title: '提交成功', icon: 'success' });
				
					// 清空表单
					this.content = '';
					this.images = [];
				
					// 返回上一页（可选）
					uni.navigateBack();
				}, 1000);
			})

			// 模拟提交过程（实际应调用接口）
			// setTimeout(() => {
			// 	uni.hideLoading();
			// 	uni.showToast({ title: '提交成功', icon: 'success' });

			// 	// 清空表单
			// 	this.content = '';
			// 	this.images = [];

			// 	// 返回上一页（可选）
			// 	// uni.navigateBack();
			// }, 1000);
		}
	}
};
</script>

<style lang="scss">
	@import "../../../uni.scss";
.container {
	background-color: #f9f9f9;
	height: 100vh;
}

.form-container {
	padding: 20rpx;
}

.feedback-textarea {
	width: 100%;
	height: 300rpx;
	padding: 20rpx;
	border-radius: 16rpx;
	background-color: #fff;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 40rpx;
}

.upload-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	margin-bottom: 60rpx;
}

.upload-btn {
	width: 160rpx;
	height: 160rpx;
	background-color: #f0f0f0;
	color: #999;
	font-size: 80rpx;
	text-align: center;
	line-height: 160rpx;
	border-radius: 16rpx;
}

.image-preview {
	position: relative;
	width: 160rpx;
	height: 160rpx;
	border-radius: 16rpx;
	overflow: hidden;
}

.image-preview image {
	width: 100%;
	height: 100%;
}

.delete-icon {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	color: white;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	width: 40rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	font-size: 28rpx;
	z-index: 2;
}

.submit-btn {
	
	position: fixed;
	    bottom: 50rpx;
	    left: 32rpx;
	    right: 32rpx;
	    border-radius: 45rpx;
	    background:  $color-main !important;
	    font-family: Source Han Sans;
	    font-size: 32rpx;
	    font-weight: normal;
	    line-height: normal;
	    letter-spacing: normal;
	    color: #FFFFFF;
	    height: 90rpx;
	    line-height: 90rpx;
	    text-align: center;
		
		&::after {
			border: none;
		}
}
</style>